<template>
  <div class="edit-popup">
    <popup ref="popupRef" :title="popupTitle" :async="true" width="550px" @confirm="handleSubmit"
           @close="handleClose">
      <el-form ref="formRef" :model="formData" label-width="90px" :rules="formRules">

        <!--        <el-form-item label="院区楼栋" prop="building">-->
        <!--          <el-cascader :options="optionsData.building" clearable v-model="formData.building" filterable/>-->
        <!--        </el-form-item>-->
        <el-form-item label="所属区院" prop="cid">
          <el-select class="w-80" v-model="formData.cid" placeholder="请选择院区" clearable>
            <el-option v-for="item in pagerExtend.campus_list" :key="item.id" :label="item.name" :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="所属区院" prop="bid">
          <el-select class="w-80" v-model="formData.bid" placeholder="请选择院区" clearable>
            <el-option v-for="item in pagerExtend.building_list" :key="item.id" :label="item.name" :value="item.id"/>
          </el-select>
        </el-form-item>
        <!--				<el-form-item label="科室代码" prop="department">-->
        <!--					<el-cascader :options="optionsData.department" clearable v-model="formData.department" filterable />-->
        <!--				</el-form-item>-->
        <el-form-item label="科室名称" prop="name">
          <el-input v-model="formData.name" clearable placeholder="请输入科室名称"/>
        </el-form-item>
        <el-form-item label="科室代码" prop="code">
          <el-input v-model="formData.code" clearable placeholder="请输入科室代码" @change="setSort(formData)"/>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="formData.telephone" clearable placeholder="请输入科室联系方式"/>
        </el-form-item>
        <el-form-item label="科室地址">
          <el-input v-model="formData.address" clearable placeholder="请输入科室地址"/>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="formData.sort" style="width: 200px;" :min="1"/>
        </el-form-item>
<!--        <el-form-item label="状态" required prop="status">-->
<!--          <el-radio-group v-model="formData.status">-->
<!--            <el-radio :label="1">显示</el-radio>-->
<!--            <el-radio :label="0">隐藏</el-radio>-->
<!--          </el-radio-group>-->
<!--        </el-form-item>-->
      </el-form>
    </popup>
  </div>
</template>

<script lang="ts" setup name="roomDepartmentEdit">
import type {FormInstance} from 'element-plus'
import Popup from '@/components/popup/index.vue'
import {
  apiRoomDepartmentAdd,
  apiRoomDepartmentEdit,
  apiRoomDepartmentDetail,
  buildingAll,
  departmentAll
} from '@/api/room/room_department'
import {timeFormat} from '@/utils/util'
import {useDictOptions} from '@/hooks/useDictOptions'

import type {PropType} from 'vue'

defineProps({
  dictData: {
    type: Object as PropType<Record<string, any[]>>,
    default: () => ({})
  },
  pagerExtend: {
    type: Object as PropType<Record<string, any[]>>,
    default: () => ({})
  },
})
const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add')


// 弹窗标题
const popupTitle = computed(() => {
  return mode.value == 'edit' ? '编辑科室信息' : '新增科室信息'
})

// 表单数据
const formData = reactive({
  id: '',
  cid: '',
  bid: '',
  code: '',
  building: [],
  department: [],
  department_sn: '',
  department_id: '',
  name: '',
  status: 1,
  sort: 10000,
  address: '',
  telephone: '',
})

const {optionsData} = useDictOptions<{
  building: any[],
  department: any[]
}>({
  building: {
    api: buildingAll
  },
  department: {
    api: departmentAll
  }
})


// 表单验证
const formRules = reactive<any>({
  cid: [{
    required: true,
    message: '请选择院区',
    trigger: ['blur']
  }],
  code: [{
    required: true,
    message: '请选择科室代码',
    trigger: ['blur']
  }],
  name: [{
    required: true,
    message: '请输入科室名称',
    trigger: ['blur']
  }],
  // status: [{
  //   required: true,
  //   message: '请选择状态',
  //   trigger: ['blur']
  // }],
})


// 获取详情
const setFormData = async (data: Record<any, any>) => {
  for (const key in formData) {
    if (data[key] != null && data[key] != undefined) {
      //@ts-ignore
      formData[key] = data[key]
    }
  }
}

const getDetail = async (row: Record<string, any>) => {

  const data = await apiRoomDepartmentDetail({
    id: row.id
  })
  setFormData(data)
}


// 提交按钮
const handleSubmit = async () => {
  await formRef.value?.validate()
  const data = {...formData,}
  mode.value == 'edit'
      ? await apiRoomDepartmentEdit(data)
      : await apiRoomDepartmentAdd(data)
  popupRef.value?.close()
  emit('success')
}

//打开弹窗
const open = (type = 'add') => {
  mode.value = type
  popupRef.value?.open()
}

// 关闭回调
const handleClose = () => {
  emit('close')
}

const setSort = (formData: Record<any, any>) => {
  formData['sort'] = 1 + formData['code']
}

defineExpose({
  open,
  setFormData,
  getDetail
})
</script>
